{% from 'macros/icon.njk' import icon with context %}

{% block content %}
<section class="card-section">
  <div class="navigation-wrapper">
    <div class="chrome-logo-wrapper">
    {% Img src="image/H2WDdWf5aPXOtVabf53xIxMJyTF2/7A2waJiE9mMmiaHUtqXl.png", alt="Chrome logo",
        width="46", height="46", alt="Chrome logo", class="chrome-logo" %}
        <p class="chrome-logo-wrapper--text">2008</p>
    </div>
    <nav class="year-navigation">
      <ul class="menu">
        <li id="menu__section2008" class="active menuitem">
          <a class="sectionLink ga-event" data-index="0" href="#section2008" data-section="2008" aria-label="2008">2008</a>
        </li>
        <li id="menu__section2009" class="menuitem">
          <a class="sectionLink ga-event" data-index="1" href="#section2009" data-section="2009" aria-label="2009">2009</a>
        </li>
        <li id="menu__section2010" class="menuitem">
          <a class="sectionLink ga-event" data-index="2" href="#section2010" data-section="2010" aria-label="2010">2010</a>
        </li>
        <li id="menu__section2011" class="menuitem">
          <a class="sectionLink ga-event" data-index="3" href="#section2011" data-section="2011" aria-label="2011">2011</a>
        </li>
        <li id="menu__section2012" class="menuitem">
          <a class="sectionLink ga-event" data-index="4" href="#section2012" data-section="2012" aria-label="2012">2012</a>
        </li>
        <li id="menu__section2013" class="menuitem">
          <a class="sectionLink ga-event" data-index="5" href="#section2013" data-section="2013" aria-label="2013">2013</a>
        </li>
        <li id="menu__section2014" class="menuitem">
          <a class="sectionLink ga-event" data-index="6" href="#section2014" data-section="2014" aria-label="2014">2014</a>
        </li>
        <li id="menu__section2015" class="menuitem">
          <a class="sectionLink ga-event" data-index="7" href="#section2015" data-section="2015" aria-label="2015">2015</a>
        </li>
        <li id="menu__section2016" class="menuitem">
          <a class="sectionLink ga-event" data-index="8" href="#section2016" data-section="2016" aria-label="2016">2016</a>
        </li>
        <li id="menu__section2017" class="menuitem">
          <a class="sectionLink ga-event" data-index="9" href="#section2017" data-section="2017" aria-label="2017">2017</a>
        </li>
        <li id="menu__section2018" class="menuitem">
          <a class="sectionLink ga-event" data-index="10" href="#section2018" data-section="2018" aria-label="2018">2018</a>
        </li>
        <li id="menu__section2019" class="menuitem">
          <a class="sectionLink ga-event" data-index="11" href="#section2019" data-section="2019" aria-label="2019">2019</a>
        </li>
        <li id="menu__section2020" class="menuitem">
          <a class="sectionLink ga-event" data-index="12" href="#section2020" data-section="2020" aria-label="2020">2020</a>
        </li>
        <li id="menu__section2021" class="menuitem">
          <a class="sectionLink ga-event" data-index="13" href="#section2021" data-section="2021" aria-label="2021">2021</a>
        </li>
        <li id="menu__section2022" class="menuitem">
          <a class="sectionLink ga-event" data-index="14" href="#section2022" data-section="2022" aria-label="2022">2022</a>
        </li>
      </ul>
    </nav>
  </div>

  <div class="card-container">
    {# Year 2008 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2008" id="section2008" data-index="0">
      <div class="first-column gap-right-300">
        <div class="card card-with-img gap-bottom-300">
          {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/KqP5cQtSMZhtKXw93XcW.png", alt="Google Chrome launches", class="card-img", width="440", height="170" %}
          <div class="card-info">
            <div class="arrow-wrapper">
              <a href="https://www.google.com/googlebooks/chrome/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Google Chrome launches" aria-label="Google Chrome launches">Google Chrome launches
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">With a leaked comic.</p>
            <div class="display-flex gap-top-500 logos img-card">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/vm2GYtLR1wy4cwqpMWyr.svg", alt="Fun tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-1" likes="84"></like-icon>
            </div>
          </div>
        </div>
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://github.blog/2008-10-19-github-turns-one/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="GitHub turns 1" aria-label="GitHub turns 1">GitHub turns 1
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow",
                  class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">The start of the most popular repository service for the web.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag",
                  class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-2" likes="306"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.sitepoint.com/microsoft-plans-to-finally-launch-web-office-suite/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="MS Office Suite for web" aria-label="MS Office Suite for web">MS Office Suite for web
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">The launch brings productivity on the web to Windows users.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg",
                  alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-3" likes="244"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.webpagetest.org/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="WebPageTest open sourced" aria-label="WebPageTest open sourced">WebPageTest open sourced
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Democratizing testing across browsers.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-4" likes="66"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://webkit.org/blog/280/full-pass-of-acid-3/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="WebKit fully passes ACID3" aria-label="WebKit fully passes ACID3">WebKit fully passes ACID3
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Third condition met. All power ahead.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-5" likes="64"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2009 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2009" id="section2009" data-index="1">
      <div class="first-column gap-right-300">
        <div class="card card-with-img gap-bottom-300">
          {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/0NOSReGgpY44zoVOi5if.png", alt="Node.js, powered by V8", class="card-img", width="440", height="170" %}
          <div class="card-info">
            <div class="arrow-wrapper">
            <a href="https://nodejs.dev/learn/the-v8-javascript-engine" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Node.js, powered by V8" aria-label="Node.js, powered by V8">Node.js, powered by V8
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
            </a>
            </div>
            <p class="card-description">The JavaScript runtime engine for mobile and desktop.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-6" likes="233"></like-icon>
            </div>
          </div>
        </div>
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="1st working draft of Flexbox" aria-label="1st working draft of Flexbox">1st working draft of Flexbox
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">One of the gamechangers for web layouts.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-61" likes="675"></like-icon>
            </div>
          </div>
        </div>
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.chromium.org/2009/06/developer-tools-for-google-chrome.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="1st release of Chrome DevTools" aria-label="1st release of Chrome DevTools">1st release of Chrome DevTools
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Open-source and built upon WebKit's Inspector.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-9" likes="111"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.chromium.org/2009/11/hello-open-source-developers-would-you.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="ChromeOS launches" aria-label="ChromeOS launches">ChromeOS launches
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">An OS dedicated to web users.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-10" likes="194"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.chromium.org/2009/09/introducing-google-chrome-frame.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Chrome Frame releases" aria-label="Chrome Frame releases">Chrome Frame releases
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Google's open source plug-in using HTML5.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-11" likes="363"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://hacks.mozilla.org/2009/11/5-years/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Firefox turns 5" aria-label="Firefox turns 5">Firefox turns 5
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Making the web better, one release at a time.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-12" likes="190"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2010 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2010" id="section2010" data-index="2">
      <div class="first-column gap-right-300">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.wired.com/2010/08/ff-webrip/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Wired: The web is dead" aria-label="Wired: The web is dead">Wired: The web is dead
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">And then in 2014: <a href="https://www.wired.com/insights/2014/02/web-dead/" target="_blank" rel="noopener noreferrer">Wired declares the Web not dead.</a></p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/vm2GYtLR1wy4cwqpMWyr.svg", alt="Fun tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-13" likes="15"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://alistapart.com/article/responsive-web-design/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Responsive Web Design" aria-label="Responsive Web Design">Responsive Web Design
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">By Ethan Marcotte.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-14" likes="541"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.chromium.org/2010/12/webgl-now-in-beta-here-comes-3d-web.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="WebGL enters beta" aria-label="WebGL enters beta">WebGL enters beta
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">An API that changed the face of 3D graphics on the web.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-15" likes="321"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.chromium.org/2010/06/html5-rocks-resource-for-open-web.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="HTML5Rocks launches" aria-label="HTML5Rocks launches">HTML5Rocks launches
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A space for devs to get up to speed on all things HTML5.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-16" likes="131"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://youtu.be/mbVVDDu8f9k?t=326" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="AppCache arrives" aria-label="AppCache arrives">Sundar Pichai at I/O
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Carrying the banner for the open web.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-17" likes="318"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="http://googlecode.blogspot.com/2010/05/introducing-google-font-api-google-font.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Google Fonts launches" aria-label="Google Fonts launches">Google Fonts launches
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Made free for all on the web.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-18" likes="58"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://tech.amikelive.com/node-292/googles-pacman-doodle-and-the-new-era-of-interactive-html/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="1st interactive Doodle" aria-label="1st interactive Doodle">1st interactive Doodle
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Google's Pacman Doodle introduces the era of interactive HTML.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-19" likes="586"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://httparchive.org/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="HTTP Archive launches" aria-label="HTTP Archive launches">HTTP Archive launches
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">And in 2019: <a href="https://almanac.httparchive.org/en/2019/" target="_blank" rel="noopener noreferrer">The Web Almanac, based on HTTP Archive, launches.</a></p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-20" likes="520"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2011 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2011" id="section2011" data-index="3">
      <div class="first-column gap-right-300">
        <div class="card card-with-img gap-bottom-300">
          {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/1btZNWnrwGNfbjZEnEWZ.png", alt="Ro.me", class="card-img", width="440", height="170" %}
          <div class="card-info first-card">
            <div class="arrow-wrapper">
            <a href="http://www.ro.me/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="HTTPArchive launches" aria-label="HTTPArchive launches">Ro.me
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
            </a>
            </div>
            <p class="card-description">A WebGL music video experiment.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-21" likes="480"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://googlechromelabs.github.io/web-audio-samples/archive/demos/samples.html" target="_blank" rel="noreferrer noopener" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Web Audio API" aria-label="Web Audio API">Web Audio API
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Unlocks audio design on the web.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-22" likes="463"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
      <div class="card card-with-img gap-bottom-300">
        {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/rXAZjTfZT8FZK2OrnSo8.png", alt="HTML becomes evergreen", class="card-img", width="440", height="170" %}
          <div class="card-info first-card">
            <div class="arrow-wrapper">
            <a href="https://blog.whatwg.org/html-is-the-new-html5" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="HTML becomes evergreen" aria-label="HTML becomes evergreen">HTML becomes evergreen
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
            </a>
            </div>
            <p class="card-description">The spec moves from versioning to a living document.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-23" likes="461"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.html5rocks.com/en/tutorials/webrtc/basics/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="VC without plugins" aria-label="VC without plugins">VC without plugins
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Made possible by WebRTC.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-24" likes="95"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2012 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2012" id="section2012" data-index="4">
      <div class="first-column gap-right-300">
        <div class="card card-with-img gap-bottom-300">
          {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/TqO3bGHaTLcdati6oyDA.png", alt="Web Lab @ the museum", width="440", height="170", class="card-img" %}
          <div class="card-info first-card">
            <div class="arrow-wrapper">
            <a href="https://experiments.withgoogle.com/web-lab" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Web Lab @ the museum" aria-label="Web Lab @ the museum">Web Lab @ the museum
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
            </a>
            </div>
            <p class="card-description">Magic of the web brought to life through 5 Chrome Experiments at the London Science Museum.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-25" likes="373"></like-icon>
            </div>
          </div>
        </div>
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://chrome.googleblog.com/2012/02/introducing-chrome-for-android.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Chrome comes to Android" aria-label="Chrome comes to Android">Chrome comes to Android
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Bringing Chrome's desktop capabilities to phones and tablets.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-26" likes="530"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.css3.info/css3-media-queries-becomes-official-w3c-recommendation-css4-media-queries-takes-shape/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Media Queries is a W3C rec" aria-label="Media Queries is a W3C rec">Media Queries is a W3C rec
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">To create the right experience for the right device.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-28" likes="366"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://thehistoryoftheweb.com/responsive-design-picture-element/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Web gets the Picture Element" aria-label="Web gets the Picture Element">Web gets the Picture Element
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Yet another feat in the world of responsive design.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-29" likes="287"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.youtube.com/watch?v=Vp524yo0p44" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Paul Irish @ ChromeDev" aria-label="Paul Irish @ ChromeDev">Paul Irish @ ChromeDev
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">One of the first videos for Chrome Developer's YouTube channel.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/vm2GYtLR1wy4cwqpMWyr.svg", alt="Fun tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-30" likes="348"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://webfoundation.org/2012/07/sir-tim-berners-lee-closes-out-2012-olympic-opening-ceremony-this-is-for-everyone-one-web/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="This Is For Everyone." aria-label="This Is For Everyone.">"This Is For Everyone."
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Sir Tim Berners-Lee's 2012 Olympic Tweet.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-31" likes="362"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2013 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2013" id="section2013" data-index="5">
      <div class="first-column gap-right-300">
        <div class="card card-with-img gap-bottom-300">
          {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/bGtfSYgpsLnMHVjuXNW6.png", alt="CSS Zen Garden turns 10", width="440", height="170", class="card-img" %}
          <div class="card-info first-card">
            <div class="arrow-wrapper">
              <a href="https://www.sitepoint.com/zen-garden-tenth-birthday/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="CSS Zen Garden turns 10" aria-label="CSS Zen Garden turns 10">CSS Zen Garden turns 10
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A space for beautiful web designs.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-32" likes="372"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.webstandards.org/2013/03/01/our-work-here-is-done/index.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Web Standards Project wraps" aria-label="Web Standards Project wraps">Web Standards Project wraps
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">On a high.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-33" likes="306"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.chromium.org/2013/04/blink-rendering-engine-for-chromium.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Chrome forks WebKit" aria-label="Chrome forks WebKit">Chrome forks WebKit
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Launching Blink.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-34" likes="350"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://dev.opera.com/blog/300-million-users-and-move-to-webkit/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Opera drops Presto" aria-label="Opera drops Presto">Opera drops Presto
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Moves to WebKit, and soon thereafter, Blink.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-8" likes="257"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://findingada.com/blog/2013/03/08/international-womens-day-influential-women-in-web-technology-and-science/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Finding Ada" aria-label="Finding Ada">Finding Ada
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Celebrates the women in web and science.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-35" likes="304"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.chromium.org/2013/06/retiring-chrome-frame.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Chrome Frame deprecates" aria-label="Chrome Frame deprecates">Chrome Frame deprecates
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">An end to acknowledge the promise of modern web browsers.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-36" likes="286"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://web.dev/promises/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Promises arrive in JavaScript" aria-label="Promises arrive in JavaScript">Promises arrive in JavaScript
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Simplifying deferred and async computations.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-37" likes="369"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.chromium.org/2013/11/introducing-chromium-powered-android.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="WebView on Android" aria-label="WebView on Android">WebView on Android
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Powered by Chromium.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-38" likes="366"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2014 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2014" id="section2014" data-index="6">
      <div class="first-column gap-right-300">
        <div class="card card-with-img gap-bottom-300">
          {% Img src="image/H2WDdWf5aPXOtVabf53xIxMJyTF2/xIHACSp5bLK0eFqiJ4i8.png", alt="Chrome dino game", width="440", height="170", class="card-img" %}
          <div class="card-info first-card">
            <div class="arrow-wrapper">
              <a href="https://thenextweb.com/news/4-years-later-google-finally-explains-the-origins-of-its-chrome-dinosaur-game" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Chrome dino game" aria-label="Chrome dino game">Chrome dino game
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Easter egg that adds fun into losing network.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-39" likes="325"></like-icon>
            </div>
          </div>
        </div>
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://developers.googleblog.com/2014/06/this-is-material-design.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Material Design announced" aria-label="Material Design announced">Material Design announced
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A new era for modern design.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-40" likes="379"></like-icon>
            </div>
          </div>
        </div>
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://web.archive.org/web/20151208115156/https://boomswaggerboom.wordpress.com/2014/11/18/lets-encrypt/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Let's Encrypt" aria-label="Let's Encrypt">Let's Encrypt
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">And by 2021: <a href="https://www.abetterinternet.org/documents/2021-ISRG-Annual-Report.pdf" target="_blank" rel="noopener noreferrer">HTTPS page loads grow from 25% (2013) to 84% globally.</a></p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-41" likes="431"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.chromium.org/2014/12/chrome-40-beta-powerful-offline-and.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Launch of Service workers" aria-label="Launch of Service workers">Launch of Service workers
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Powerful offline and lightning fast loading on mobile web.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-27" likes="329"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.jquery.com/2014/01/15/the-jquery-foundation-and-standards/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="A standards-driven future" aria-label="A standards-driven future">A standards-driven future
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Envisioned by jQuery.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-42" likes="267"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="http://slaveryfootprint.org/#where_do_you_live" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="HTML5 native drag and drop" aria-label="HTML5 native drag and drop">HTML5 native drag and drop
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Powering this interactive infographic in desktop.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-43" likes="312"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2015 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2015" id="section2015" data-index="7">
      <div class="first-column gap-right-300">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Progressive Web Apps" aria-label="Progressive Web Apps">Progressive Web Apps
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Introduced by Alex Russell.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-44" likes="380"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Web notifications launches" aria-label="Web notifications launches">Web notifications launches
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">2020: <a href="https://www.howtogeek.com/642318/web-browsers-are-silencing-annoying-notification-popups/" target="_blank" rel="noopener noreferrer">Major browsers make web notifications less annoying.</a></p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-45" likes="289"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://developer.mozilla.org/en-US/docs/MDN/At_ten" target="_blank" rel="noopener noreferrer"  class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="MDN turns 10" aria-label="MDN turns 10">MDN turns 10
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Mozilla Developer Network's decade long journey.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-46" likes="302"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://developers.google.com/web/showcase/2015/airhorner" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Chrome Devs share Airhorner" aria-label="Chrome Devs share Airhorner">Chrome Devs share Airhorner
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">The most fun, yet annoying, PWA demo app ever made.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/vm2GYtLR1wy4cwqpMWyr.svg", alt="Fun tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-47" likes="235"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.theverge.com/2015/3/17/8230631/microsoft-is-killing-off-the-internet-explorer-brand" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="The end of Internet Explorer" aria-label="The end of Internet Explorer">The end of Internet Explorer
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Giving way to MS's new browser, formerly named Project Spartan. </p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-48" likes="385"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.mozilla.org/luke/2015/06/17/webassembly/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="WebAssembly" aria-label="WebAssembly">WebAssembly
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A cross-browser project to serve as a compilation target for the Web.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-49" likes="280"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.w3.org/TR/2015/REC-IndexedDB-20150108/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="IndexedDB is a W3C rec" aria-label="IndexedDB is a W3C rec">IndexedDB is a W3C rec
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Helping speed up load times for repeat visits and more.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-50" likes="220"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.theverge.com/2015/4/29/8511169/microsoft-edge-official-name-internet-explorer-upgrade" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Edge succeeds IE" aria-label="Edge succeeds IE">Edge succeeds IE
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">The new Microsoft browser is born.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-51" likes="296"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2016 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2016" id="section2016" data-index="8">
      <div class="first-column gap-right-300">
        <div class="card card-with-img gap-bottom-300">
          {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/LaXWpmFXzNd58ZjXoZTK.png", alt="Quick, Draw!", width="440", height="170", class="card-img" %}
          <div class="card-info first-card">
            <div class="arrow-wrapper">
              <a href="https://quickdraw.withgoogle.com/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Quick, Draw!" aria-label="Quick, Draw!">Quick, Draw!
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A machine learning based web app.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-52" likes="352"></like-icon>
            </div>
          </div>
        </div>

          <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.smashingmagazine.com/2016/04/html5-media-source-extensions-bringing-production-video-web/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Media Source Extensions" aria-label="Media Source Extensions">Media Source Extensions
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Video streaming without plugins.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-53" likes="240"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card card-with-img gap-bottom-300">
          {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/O20NPlv7SFpH9qTJX7ML.png", alt="aul Lewis on the sax", width="440", height="170", class="card-img" %}
          <div class="card-info first-card">
            <div class="arrow-wrapper">
              <a href="https://www.youtube.com/watch?v=m4-IBIEjOe0/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Paul Lewis on the sax" aria-label="Paul Lewis on the sax">Paul Lewis on the sax
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Jazzing up Chrome Dev Summit.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/vm2GYtLR1wy4cwqpMWyr.svg", alt="Fun tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-54" likes="237"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://webkit.org/blog/5718/10-years-of-web-inspector/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="WebKit Web Inspector turns 10" aria-label="WebKit Web Inspector turns 10">WebKit Web Inspector turns 10
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Taking debugging beyond alert().</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-55" likes="237"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2017 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2017" id="section2017" data-index="9">
      <div class="first-column gap-right-300">
        <div class="card card-with-img gap-bottom-300">
          {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/MUbcyZcSdeIFv5y2Yk9h.png", alt="Glitch.com launches", width="440", height="170", class="card-img" %}
          <div class="card-info first-card">
            <div class="arrow-wrapper">
              <a href="https://www.wired.com/story/clive-thompson-tinker-with-code/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Glitch.com launches" aria-label="Glitch.com launches">Glitch.com launches
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Giving developers an easy way to edit in the browser.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-56" likes="307"></like-icon>
            </div>
          </div>
        </div>
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.photopea.com/creating-photopea.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Photopea" aria-label="Photopea">Photopea
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A design editing web app, built by a single developer.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-57" likes="285"></like-icon>
            </div>
          </div>
        </div>
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.webcomponents.org/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Web Components" aria-label="Web Components">Web Components
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Adopted in most browsers.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-58" likes="99"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.mozilla.org/en/mozilla/mozilla-brings-microsoft-google-w3c-samsung-together-create-cross-browser-documentation-mdn/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="MDN Web Docs" aria-label="MDN Web Docs">MDN Web Docs
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Major browsers come together to contribute to documentation.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-59" likes="318"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.webdesignmuseum.org/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Web Design Museum" aria-label="Web Design Museum">Web Design Museum
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Preserves the history of web design.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-60" likes="241"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://rachelandrew.co.uk/archives/2017/03/07/css-grid-lands-in-firefox-52/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="CSS Grid" aria-label="CSS Grid">CSS Grid
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Supported by all major browsers.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-61" likes="675"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2018 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2018" id="section2018" data-index="10">
      <div class="first-column gap-right-300">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.youtube.com/watch?v=CbU9GzgS0HY" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Baking the web" aria-label="Baking the web">Baking the web
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">When we made our own web cake for 10 years of Chrome.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/vm2GYtLR1wy4cwqpMWyr.svg", alt="Fun tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-62" likes="254"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://web.dev/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="web.dev launches" aria-label="web.dev launches">web.dev launches
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">To help developers build better websites and web-based apps.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-63" likes="293"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.webosose.org/blog/2019/11/15/how-chromium-helps-webos-ose-build-an-ecosystem/#use-of-chromium-in-webos-ose" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="LG WebOS OSE" aria-label="LG WebOS OSE">LG WebOS OSE
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A web-centric operating system for embedded devices based on Chromium.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-64" likes="70"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://twitter.com/kosamari/status/1037390891269402624" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="How the browser works" aria-label="How the browser works">How the browser works
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A four part drawsplainer by Mariko Kosaka.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-65" likes="250"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://meltdownattack.com/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Meltdown and Spectre" aria-label="Meltdown and Spectre">Meltdown and Spectre
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Bringing an industry-wide response to security bugs.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-66" likes="206"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="http://squoosh.app/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Squoosh" aria-label="Squoosh">Squoosh
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">An image compression web app.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-67" likes="242"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://developers.google.com/web/updates/capabilities" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Project Fugu launches" aria-label="Project Fugu launches">Project Fugu launches
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Google's capabilities project created to advance web apps.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-68" likes="217"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://youtu.be/P-oysz0NKCo?t=922" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Surma's live demo melt" aria-label="Surma's live demo melt">Surma's live demo melt
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Shares the director's cut from Chrome Dev Summit.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/vm2GYtLR1wy4cwqpMWyr.svg", alt="Fun tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-69" likes="219"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2019 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2019" id="section2019" data-index="11">
      <div class="first-column gap-right-300">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.w3.org/blog/2019/05/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="WHATWG & W3C collaborate" aria-label="WHATWG & W3C collaborate">WHATWG & W3C collaborate
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Working on a single version of the HTML and DOM specs.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-70" likes="239"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://theoutline.com/post/8423/a-good-place-symbolics-internet-history-oldest-website" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Internet Museum" aria-label="Internet Museum">Internet Museum
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Oldest domain preserves the history of the web forever.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-71" likes="258"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://web30.web.cern.ch/web-history.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="The Web turns 30" aria-label="The Web turns 30">The Web turns 30
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Marking three decades of connecting people to content.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-72" likes="285"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://web.dev/browser-level-image-lazy-loading/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Lazy loading" aria-label="Lazy loading">Lazy loading
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">In Chrome and Firefox. 2022: <a href="https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/#web-apis" target="_blank" rel="noopener noreferrer">Safari adds in 15.4 release.</a></p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-73" likes="284"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://developer.chrome.com/blog/new-in-chrome-73/#pwas-everywhere" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="PWAs on desktop OS" aria-label="PWAs on desktop OS">PWAs on desktop OS
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Installability available across all major desktop operating systems.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-74" likes="277"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://hacks.mozilla.org/2019/09/moving-firefox-to-a-faster-4-week-release-cycle/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Firefox's 4-week release cycle" aria-label="Firefox's 4-week release cycle">Firefox's 4-week release cycle
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">To bring more agility and features to its devs.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-75" likes="112"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://github.com/mraible/history-of-web-frameworks-timeline" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="A History of Web Frameworks" aria-label="A History of Web Frameworks">A History of Web Frameworks
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Celebrating the richness of web tooling, with more to follow.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-76" likes="213"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://experiments.withgoogle.com/freddiemeter" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Freddiemeter" aria-label="Freddiemeter">Freddiemeter
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Powered by Tensorflow.js, Web Audio and WebRTC.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-77" likes="199"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2020 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2020" id="section2020" data-index="12">
      <div class="first-column gap-right-300">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://isflashdeadyet.com/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Flash's end of life" aria-label="Flash's end of life">Flash's end of life
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">"As with many good things, its time has passed."</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-78" likes="379"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.nytimes.com/2021/05/21/style/welcome-to-the-space-jam-again.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Space Jam jams again" aria-label="Space Jam jams again">Space Jam jams again
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">The website gets remade.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/vm2GYtLR1wy4cwqpMWyr.svg", alt="Fun tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-79" likes="221"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://iss-sim.spacex.com/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="SpaceX ISS docking simulator" aria-label="SpaceX ISS docking simulator">SpaceX ISS docking simulator
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A web based simulator to manually dock with the ISS.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-80" likes="238"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.howtogeek.com/642318/web-browsers-are-silencing-annoying-notification-popups/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Less annoying notifications" aria-label="Less annoying notifications">Less annoying notifications
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Chrome and Firefox both improve UX.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-81" likes="274"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://opencollective.com/open-web-docs" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Open Web Docs launches" aria-label="Open Web Docs launches">Open Web Docs launches
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">An ecosystem-wide initiative to maintain web documentation.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-82" likes="242"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://css-tricks.com/late-to-logical/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Support for logical properties" aria-label="Support for logical properties">Support for logical properties
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A wave of support across major browsers.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-83" likes="206"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blogs.windows.com/windowsexperience/2018/12/06/microsoft-edge-making-the-web-better-through-more-open-source-collaboration/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Edge adopts Chromium" aria-label="Edge adopts Chromium">Edge adopts Chromium
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Drops EdgeHTML.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-84" likes="342"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://experiments.withgoogle.com/blob-opera" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Blob Opera" aria-label="Blob Opera">Blob Opera
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A Web Audio API based Chrome Experiment.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-85" likes="231"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2021 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2021" id="section2021" data-index="13">
      <div class="first-column gap-right-300">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://eyes.nasa.gov/apps/mars2020/#/home" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="NASA's Mars landing" aria-label="NASA's Mars landing">NASA's Mars landing
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A simulation built on WebGL.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-86" likes="292"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.nytimes.com/games/wordle/index.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Wordle" aria-label="Wordle">Wordle
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">The web based gaming phenomenon.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-87" likes="338"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://code.visualstudio.com/blogs/2021/10/20/vscode-dev" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="vscode.dev launches" aria-label="vscode.dev launches">vscode.dev launches
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">VS Code becomes a web app.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-88" likes="327"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://web.dev/compat2021/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Compat 2021" aria-label="Compat 2021">Compat 2021
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Eliminating five top web compatibility pain points.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-89" likes="234"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://blog.chromium.org/2021/03/a-safer-default-for-navigation-https.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Chrome goes HTTPS by default" aria-label="Chrome goes HTTPS by default">Chrome goes HTTPS by default
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Brings a safer default for navigations.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-90" likes="384"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://developer.chrome.com/blog/renderingng/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="RenderingNG" aria-label="RenderingNG">RenderingNG
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">The project, enabling the next generation of fluid UI, is (almost) complete.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-91" likes="231"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://dojacode.com/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Girls Who Code's DojaCode" aria-label="Girls Who Code's DojaCode">Girls Who Code's DojaCode
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">The world's first ever codable music video.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-92" likes="268"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://designcember.com/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Designcember" aria-label="Designcember">Designcember
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">A fun celebration of web design featuring container queries.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/cZgDIImiPwnUX3zbdBzT.svg", alt="Inspiration tag", class="tags gap-top-100", width="117", height="16" %}
              <like-icon item="100-card-93" likes="243"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    {# Year 2022 #}
    <section class="inner-card display-flex center-margin gap-right-300 year-2022" id="section2022" data-index="14">
      <div class="first-column gap-right-300">
        <div class="card card-with-img gap-bottom-300">
          {% Img src="image/euHyTzyvArhakPb4YwKi6oJS9Rv2/prGqUDRb0j207FZu93py.png", alt="Chrome's 100th release", width="800", height="309" %}
          <div class="card-info first-card">
            <div class="arrow-wrapper">
              <a href="https://developer.chrome.com/blog/new-in-chrome-100/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Chrome's 100th release" aria-label="Chrome's 100th release">Chrome's 100th release
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">And Firefox hits the milestone later this year.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-94" likes="751"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://developer.chrome.com/blog/cascade-layers/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Cascade layers in all browsers" aria-label="Cascade layers in all browsers">Cascade layers in all browsers
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">In Chrome 99, Firefox 97 and Safari 15.4.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-95" likes="400"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://webkit.org/blog/12257/the-file-system-access-api-with-origin-private-file-system/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="File System API WebKit support" aria-label="File System API WebKit support">File System API WebKit support
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">With origin private file system.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-96" likes="424"></like-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="second-column">
        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://www.vulture.com/article/homestar-runner-krister-johnson-interview.html" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Homestar Runner tribute" aria-label="Homestar Runner tribute">Homestar Runner tribute
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Celebrating the era of destination websites.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/vm2GYtLR1wy4cwqpMWyr.svg", alt="Fun tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-97" likes="371"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://developer.chrome.com/blog/canvas2d/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Canvas 2D catches up" aria-label="Canvas 2D catches up">Canvas 2D catches up
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">With the latest Canvas API launched in Chrome 99.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-98" likes="279"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://web.dev/interop-2022" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="Interop2022" aria-label="Interop2022">Interop2022
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">The next step to improving browser compatibility.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/2SWyoN1Cflu2i9ds1fan.svg", alt="Celebration tag", class="tags gap-top-100", width="119", height="15" %}
              <like-icon item="100-card-99" likes="239"></like-icon>
            </div>
          </div>
        </div>

        <div class="card gap-bottom-300">
          <div class="card-info card-top">
            <div class="arrow-wrapper">
              <a href="https://web.dev/pwas-on-oculus-2/" target="_blank" rel="noopener noreferrer" class="card-heading ga-event" data-ga-event="click" data-ga-category="card heading" data-ga-label="PWAs in Oculus" aria-label="PWAs in Oculus">PWAs in Oculus
                {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/dh8CuKvNIfkb8Bz00Th4.svg", alt="Arrow", class="right-arrow", width="16", height="12" %}
              </a>
            </div>
            <p class="card-description">Meta brings the power of the web to VR.</p>
            <div class="display-flex gap-top-200 logos">
              {% Img src="image/x1Los57vDga6OEMNi1dIJwZ0qvp2/PYajnvHnl9nnQpdWDfzA.svg", alt="Promise tag", class="tags gap-top-100", width="120", height="16" %}
              <like-icon item="100-card-100" likes="472"></like-icon>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</section>

{% endblock %}
